<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>用户管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th,
        td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }

        .form-group {
            margin-bottom: 15px;
        }

        input {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }

        button {
            padding: 8px 16px;
            cursor: pointer;
        }

        .btn-add {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>

<body>
    <h1>用户管理系统</h1>
    <button onclick="showAddForm()" class="btn-add">添加用户</button>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="userData"></tbody>
    </table>

    <div id="userForm" style="display: none;">
        <h3>添加用户</h3>
        <input type="text" id="name" placeholder="姓名" required>
        <input type="email" id="email" placeholder="邮箱" required>
        <input type="number" id="age" placeholder="年龄" required>
        <button onclick="saveUser()" class="btn-add">保存</button>
        <button onclick="hideForm()">取消</button>
    </div>

    <script>
        let currentUser = null;

        // 加载用户数据
        async function loadUsers() {
            const response = await fetch('http://localhost:3000/api/users');
            const users = await response.json();
            renderTable(users);
        }

        // 渲染表格
        function renderTable(users) {
            const tbody = document.getElementById('userData');
            tbody.innerHTML = users.map(user => `
                <tr>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.email}</td>
                    <td>${user.age}</td>
                    <td>
                        <button onclick="editUser(${user.id})">编辑</button>
                        <button onclick="deleteUser(${user.id})">删除</button>
                    </td>
                </tr>
            `).join('');
        }

        // 保存用户
        async function saveUser() {
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const age = document.getElementById('age').value;

            const userData = { name, email, age };

            try {
                const response = await fetch('http://localhost:3000/api/users', {
                    method: currentUser ? 'PUT' : 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(userData)
                });
                const result = await response.json();
                hideForm();
                loadUsers();
            } catch (error) {
                alert('操作失败: ' + error.message);
            }
        }

        // 编辑用户
        async function editUser(id) {
            const response = await fetch(`http://localhost:3000/api/users/${id}`);
            currentUser = await response.json();
            document.getElementById('name').value = currentUser.name;
            document.getElementById('email').value = currentUser.email;
            document.getElementById('age').value = currentUser.age;
            document.getElementById('userForm').style.display = 'block';
        }

        // 删除用户
        async function deleteUser(id) {
            if (confirm('确定删除吗？')) {
                await fetch(`http://localhost:3000/api/users/${id}`, {
                    method: 'DELETE'
                });
                loadUsers();
            }
        }

        // 初始化
        window.onload = loadUsers;
    </script>
</body>

</html>